<template>
  <el-dialog
    :title="lang.t('common.info')"
    v-model="show"
    :width="1300"
    destroy-on-close
  >
    <el-scrollbar max-height="600px">
      <Goods :data="data" />
      <el-descriptions :title="plugin.lang('order.info')" direction="vertical" style="margin-top: 30px" :column="6">
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.checkout') }}
          </template>
          {{ data.checkout_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.account_name') }}
          </template>
          {{ data.account_name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.created_at') }}
          </template>
          {{ data.created_at }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.pay_money') }}
          </template>
          <el-link type="primary" href="javascript:;">{{ money(data.pay_money) }}</el-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.pay_change') }}
          </template>
          <el-link type="success" href="javascript:;">{{ money(data.pay_change) }}</el-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            {{ plugin.lang('order.remarks') }}
          </template>
          {{ data.remarks }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="plugin.lang('pay.list')" style="margin-top: 30px" :column="4">
        <template v-for="(item, key) in data.pay" :key="key">
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('order.checkout') }}
            </template>
            {{ item.checkout_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('pay.account_name') }}
            </template>
            {{ item.account_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ item.pay_name }} <span v-if="item.data"> ({{ item.data }})</span>
            </template>
            {{ money(item.money) }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              {{ plugin.lang('pay.time') }}
            </template>
            {{ time.format(item.created_at) }}
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-scrollbar>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'

import Goods from '@/plugin/checkout/components/goods'

export default {
  components: {
    Goods
  },
  setup() {
    // 对话框
    const show = ref(false)

    // 数据
    const data = ref({})

    // 打开
    const open = row => {
      // 深拷贝
      data.value = Object.assign({}, row)
      // 日期
      data.value.created_at = app.time.format(data.value.created_at)

      show.value = true
    }

    // 显示订单
    const onTotal = () => {
      return [
        '', 
        '', 
        data.value.count,
        app.money(data.value.total), 
        app.money(data.value.discount_money), 
        app.money(data.value.money_tax), 
        app.money(data.value.tax_money), 
        app.money(data.value.req_money), 
        app.money(data.value.money)
      ]
    }

    return {
      lang: app.lang,
      money: app.money,
      time: app.time,
      plugin: app.plugin.index,
      show,
      open,
      data,
      onTotal
    }
  }
}
</script>